<template>
  <div class="app-page">
    <el-table-form ref="form" :model="query">

      <el-form-item label="盘点单号:" prop="name">
        <el-input v-model="query.stockCheckCode" placeholder="请输入" clearable />
      </el-form-item>

      <el-form-item label="仓库名称:" prop="storeId">
        <el-select v-model="query.storeId" placeholder="请选择">
          <!-- <el-option label="请选择" :value="0" /> -->
          <el-option
            v-for="item in storeMap"
            :key="item.storeId"
            :label="item.storeName"
            :value="item.storeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="盘点时间:" :table-form-merge="2" class="merge-item">
        <el-date-picker
          v-model="query.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <template v-slot:btns>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search"
        >查询</el-button>

      </template>

    </el-table-form>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="add">盘点</el-button>
      </div>
    </div>
    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{ bottomOffset: 10 }"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />

    <add ref="add" :store-map="storeMap" @refresh="refresh" />
    <detail ref="detail" :store-map="storeMap" @refresh="refresh" />
  </div>
</template>

<script>
  import { repertoryStockCheck, repertoryStore } from '@/api'
  import { parseTime } from '@/utils'
  import add from './components/add.vue'
  import detail from './components/detail.vue'
  export default {
    name: 'stockCheck',
    components: { add, detail },
    data() {
      return {
        query: {
          storeId: null,
          lessCount: 0,
          date: [new Date(), new Date()],
          stockCheckCode: null
        },
        storeMap: [],
        tableData: {
          total: 0,
          column: [
            {
              prop: 'checkDt',
              label: '盘点时间',
              width: 270,
              render: (h, { row }) => <span>{ row.checkDt && parseTime(row.checkDt, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },

            {
              prop: 'stockCheckCode',
              label: '盘点单号',
              render: (h, { row, $index }) => {
                return (<el-link size='mini' onClick={() => this.openDetail(row, $index)} > {row.stockCheckCode} </el-link>)
              }

            },
            {
              prop: 'storeName',
              label: '仓库名称'
            },
            {
              prop: 'operator',
              label: '盘点人员'
            },
            {
              prop: 'remark',
              label: '备注'
            }

          ],
          data: []
        }
      }
    },
    async created() {
      this.initStoreMap()
    },
    methods: {
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          ...this.query
        }
        if (this.query.date && this.query.date.length) {
          params['createTime'] = this.query.date[0]
          params['createTimeEnd'] = this.query.date[1]
        }
        const res = await repertoryStockCheck(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      async initStoreMap() {
        const params = {
          reType: 4
        }
        const res = await repertoryStore(params)
        this.storeMap = res.data
      },
      search() {
        this.$refs.lbTable.fetch({ })
      },
      add() {
        this.$refs.add.open()
      },
      openDetail(row) {
        this.$refs.detail.open(row)
      },
      refresh() {
        this.$refs.lbTable.fetch({ })
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-form-item .el-form-item {
  margin-bottom: 0;
}
.merge-item {
  /deep/ .el-form-item__content {
    display: flex;
  }
}
.btn-group {
  display: flex;
  justify-content: space-between;
}

</style>
